import 'package:flutter/material.dart';
import 'package:flutter_grammar/pages/tabs/category.dart';
import 'package:flutter_grammar/pages/tabs/home.dart';
import 'package:flutter_grammar/pages/tabs/setting.dart';

/* 
FloatingActionButton
FloatingActionButton简称FAB ,可以实现浮动按钮

child                     子视图，一般为Icon，不推荐使用文字
tooltip                   FAB被长按时显示，也是无障碍功能
backgroundColor           背景颜色
elevation                 未点击的时候的阴影
hignlightElevation        点击时阴影值，默认12.0
onPressed                 点击事件回调
shape                     可以定义FAB的形状等
mini                      是否是mini类型默认false


floatingActionButtonLocation 配置浮动样式
*/

void main() {
  runApp(
      // 入口文件可以是自定义组件 也可以是flutter组件
      MaterialApp(home: Tabs()));
}

class Tabs extends StatefulWidget {
  const Tabs({super.key});

  @override
  State<Tabs> createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;

  // 引入需要的tab
  final List<Widget> _pages = const [
    HomePage(),
    CategoryPage(),
    SettingPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FloatingActionButton'),
      ),
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
            BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
          ],
          currentIndex: _currentIndex,
          onTap: (val) {
            setState(() {
              _currentIndex = val;
            });
          },
          fixedColor: Colors.blueAccent),
      floatingActionButton: (Container(
        height: 48,
        width: 48,
        padding: EdgeInsets.all(0),
        margin: EdgeInsets.only(top: 10),
        decoration: BoxDecoration(
            color: _currentIndex == 1 ? Colors.red : Colors.blueAccent,
            borderRadius: BorderRadius.circular(30)),
        child: FloatingActionButton(
          backgroundColor: _currentIndex == 1 ? Colors.red : Colors.blueAccent,
          onPressed: () {
            setState(() {
              _currentIndex = 1;
            });
          },
          child: Icon(Icons.add),
        ),
      )),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}


